<template>
	<div>
		<div class="publicpageview" id="publicpageview" style="position: relative;">
			<div style="text-align: center;font-weight: bold;margin-top: 20px;">
				公有住房出售情况统计分析
				<el-button style="position: absolute;right: 50px;" type="primary" size="mini" @click="fanhui">返回</el-button>
			</div>
			<div style="display: flex;margin-top: 20px;box-sizing: border-box;">
				<div class="list10"></div>
				<div class="list2">
					<div class="list6">地段等级</div>
					<div style="display: flex;">
						<div class="list5">一级</div>
						<div class="list5">二级</div>
						<div class="list5">三级</div>
						<div class="list5">四级</div>
						<div class="list5">五级</div>
					</div>
				</div>
				<div class="list111">合计</div>
				<div class="list2">
					<div class="list6">合计工龄</div>
					<div style="display: flex;">
						<div class="list5">0-19年</div>
						<div class="list5">20-39年 </div>
						<div class="list5">40-49年</div>
						<div class="list5">50-59年</div>
						<div class="list5">60年以上</div>
					</div>
				</div>
			</div>
			<div style="display: flex;box-sizing: border-box;">
				<div class="list11">户数</div>
				<div class="list5">{{objList[0].renterNum}}</div>
				<div class="list5">{{objList[1].renterNum}}</div>
				<div class="list5">{{objList[2].renterNum}}</div>
				<div class="list5">{{objList[3].renterNum}}</div>
				<div class="list5">{{objList[4].renterNum}}</div>
				<div class="list5">{{objList[5].renterNum}}</div>
				<div class="list5">{{objList[6].renterNum}}</div>
				<div class="list5">{{objList[7].renterNum}}</div>
				<div class="list5">{{objList[8].renterNum}}</div>
				<div class="list5">{{objList[9].renterNum}}</div>
				<div class="list5">{{objList[10].renterNum}}</div>
			</div>
			<div style="display: flex;box-sizing: border-box;">
				<div class="list11">建筑面积</div>
				<div class="list5">{{objList[0].buildingArea}}</div>
				<div class="list5">{{objList[1].buildingArea}}</div>
				<div class="list5">{{objList[2].buildingArea}}</div>
				<div class="list5">{{objList[3].buildingArea}}</div>
				<div class="list5">{{objList[4].buildingArea}}</div>
				<div class="list5">{{objList[5].buildingArea}}</div>
				<div class="list5">{{objList[6].buildingArea}}</div>
				<div class="list5">{{objList[7].buildingArea}}</div>
				<div class="list5">{{objList[8].buildingArea}}</div>
				<div class="list5">{{objList[9].buildingArea}}</div>
				<div class="list5">{{objList[10].buildingArea}}</div>
			</div>
			<div style="display: flex;box-sizing: border-box;">
				<div class="list11">出售建筑面积</div>
				<div class="list5">{{objList[0].sellBuildingArea}}</div>
				<div class="list5">{{objList[1].sellBuildingArea}}</div>
				<div class="list5">{{objList[2].sellBuildingArea}}</div>
				<div class="list5">{{objList[3].sellBuildingArea}}</div>
				<div class="list5">{{objList[4].sellBuildingArea}}</div>
				<div class="list5">{{objList[5].sellBuildingArea}}</div>
				<div class="list5">{{objList[6].sellBuildingArea}}</div>
				<div class="list5">{{objList[7].sellBuildingArea}}</div>
				<div class="list5">{{objList[8].sellBuildingArea}}</div>
				<div class="list5">{{objList[9].sellBuildingArea}}</div>
				<div class="list5">{{objList[10].sellBuildingArea}}</div>
			</div>
			<div style="display: flex;box-sizing: border-box;">
				<div class="list11">出售资金</div>
				<div class="list5">{{objList[0].price}}</div>
				<div class="list5">{{objList[1].price}}</div>
				<div class="list5">{{objList[2].price}}</div>
				<div class="list5">{{objList[3].price}}</div>
				<div class="list5">{{objList[4].price}}</div>
				<div class="list5">{{objList[5].price}}</div>
				<div class="list5">{{objList[6].price}}</div>
				<div class="list5">{{objList[7].price}}</div>
				<div class="list5">{{objList[8].price}}</div>
				<div class="list5">{{objList[9].price}}</div>
				<div class="list5">{{objList[10].price}}</div>
			</div>

			<div style="display: flex;box-sizing: border-box;">
				<div class="list10"></div>
				<div class="list20">
					<div class="list21">楼层</div>
					<div style="display: flex;">
						<div class="list5">一楼</div>
						<div class="list5">二楼</div>
						<div class="list5">三楼</div>
						<div class="list5">四楼</div>
						<div class="list5">五楼</div>
						<div class="list5">六楼</div>
						<div class="list5">七楼</div>
						<div class="list5">八楼</div>
						<div class="list5">高层</div>
						<div class="list5">顶层</div>
						<div class="list5">合计</div>
					</div>
				</div>
			</div>
			<div style="display: flex;box-sizing: border-box;">
				<div class="list11">户数</div>
				<div class="list5">{{objList[11].renterNum}}</div>
				<div class="list5">{{objList[12].renterNum}}</div>
				<div class="list5">{{objList[13].renterNum}}</div>
				<div class="list5">{{objList[14].renterNum}}</div>
				<div class="list5">{{objList[15].renterNum}}</div>
				<div class="list5">{{objList[16].renterNum}}</div>
				<div class="list5">{{objList[17].renterNum}}</div>
				<div class="list5">{{objList[18].renterNum}}</div>
				<div class="list5">{{objList[19].renterNum}}</div>
				<div class="list5">{{objList[20].renterNum}}</div>
				<div class="list5">{{objList[21].renterNum}}</div>
			</div>
			<div style="display: flex;box-sizing: border-box;">
				<div class="list11">建筑面积</div>
				<div class="list5">{{objList[11].buildingArea}}</div>
				<div class="list5">{{objList[12].buildingArea}}</div>
				<div class="list5">{{objList[13].buildingArea}}</div>
				<div class="list5">{{objList[14].buildingArea}}</div>
				<div class="list5">{{objList[15].buildingArea}}</div>
				<div class="list5">{{objList[16].buildingArea}}</div>
				<div class="list5">{{objList[17].buildingArea}}</div>
				<div class="list5">{{objList[18].buildingArea}}</div>
				<div class="list5">{{objList[19].buildingArea}}</div>
				<div class="list5">{{objList[20].buildingArea}}</div>
				<div class="list5">{{objList[21].buildingArea}}</div>
			</div>
			<div style="display: flex;box-sizing: border-box;">
				<div class="list11">出售建筑面积</div>
				<div class="list5">{{objList[11].sellBuildingArea}}</div>
				<div class="list5">{{objList[12].sellBuildingArea}}</div>
				<div class="list5">{{objList[13].sellBuildingArea}}</div>
				<div class="list5">{{objList[14].sellBuildingArea}}</div>
				<div class="list5">{{objList[15].sellBuildingArea}}</div>
				<div class="list5">{{objList[16].sellBuildingArea}}</div>
				<div class="list5">{{objList[17].sellBuildingArea}}</div>
				<div class="list5">{{objList[18].sellBuildingArea}}</div>
				<div class="list5">{{objList[19].sellBuildingArea}}</div>
				<div class="list5">{{objList[20].sellBuildingArea}}</div>
				<div class="list5">{{objList[21].sellBuildingArea}}</div>
			</div>
			<div style="display: flex;box-sizing: border-box;">
				<div class="list11">出售资金</div>
				<div class="list5">{{objList[11].price}}</div>
				<div class="list5">{{objList[12].price}}</div>
				<div class="list5">{{objList[13].price}}</div>
				<div class="list5">{{objList[14].price}}</div>
				<div class="list5">{{objList[15].price}}</div>
				<div class="list5">{{objList[16].price}}</div>
				<div class="list5">{{objList[17].price}}</div>
				<div class="list5">{{objList[18].price}}</div>
				<div class="list5">{{objList[19].price}}</div>
				<div class="list5">{{objList[20].price}}</div>
				<div class="list5">{{objList[21].price}}</div>
			</div>


			<div style="display: flex;">
				<div>
					<div style="display: flex;box-sizing: border-box;">
						<div style="display: flex;">
							<div class="list10"></div>
							<div class="list2" style="width: 400px;">
								<div class="list6" style="width: 400px;">房屋年限</div>
								<div style="display: flex;">
									<div class="list5">0-10年</div>
									<div class="list5">11-20年</div>
									<div class="list5">21-30年</div>
									<div class="list5">30年以上</div>
								</div>
							</div>
							<div class="list111">合计</div>
						</div>
					</div>
					<div style="display: flex;box-sizing: border-box;">
						<div class="list11">户数</div>
						<div class="list5">{{objList[22].renterNum}}</div>
						<div class="list5">{{objList[23].renterNum}}</div>
						<div class="list5">{{objList[24].renterNum}}</div>
						<div class="list5">{{objList[25].renterNum}}</div>
						<div class="list5">{{objList[26].renterNum}}</div>
					</div>
					<div style="display: flex;box-sizing: border-box;">
						<div class="list11">建筑面积</div>
						<div class="list5">{{objList[22].buildingArea}}</div>
						<div class="list5">{{objList[23].buildingArea}}</div>
						<div class="list5">{{objList[24].buildingArea}}</div>
						<div class="list5">{{objList[25].buildingArea}}</div>
						<div class="list5">{{objList[26].buildingArea}}</div>
					</div>
					<div style="display: flex;box-sizing: border-box;">
						<div class="list11">出售建筑面积</div>
						<div class="list5">{{objList[22].sellBuildingArea}}</div>
						<div class="list5">{{objList[23].sellBuildingArea}}</div>
						<div class="list5">{{objList[24].sellBuildingArea}}</div>
						<div class="list5">{{objList[25].sellBuildingArea}}</div>
						<div class="list5">{{objList[26].sellBuildingArea}}</div>
					</div>
					<div style="display: flex;box-sizing: border-box;">
						<div class="list11">出售资金</div>
						<div class="list5">{{objList[22].price}}</div>
						<div class="list5">{{objList[23].price}}</div>
						<div class="list5">{{objList[24].price}}</div>
						<div class="list5">{{objList[25].price}}</div>
						<div class="list5">{{objList[26].price}}</div>
					</div>
				</div>
				<!-- <div class="list99">备注：</div> -->
			</div>
		</div>
	</div>




	<!-- <button style="margin: 10px auto 0;display: block;" @click="handleout">打印直管公有住宅房产估价变动汇总月报</button> -->

	<!-- <button style="margin: 10px auto 0;display: block;" v-print="printObj">打印附加租金分析表</button>
		<div id="loading" v-show="printLoading"></div> -->
	</div>
</template>

<script>
	import * as XLSX from 'xlsx'
	import dayjs from 'dayjs'
	import {
		houseAdminList,
		addRoom,
		roomDetails,
		updRoom,
		blockList,
		blockDetail
	} from '@/api/industry'
	export default {
		props: {
			blockobj: Object
		},
		name: 'zujintiaozhengguocheng',
		data() {
			return {
				printLoading: true,
				printObj: {
					id: "publicpageview",
					popTitle: '打印预览',
					extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css",
					beforeOpenCallback(vue) {
						console.log('打开之前')
					},
					openCallback(vue) {
						console.log('执行了打印')
					},
					closeCallback(vue) {
						console.log('关闭了打印工具')
					}
				},
				list: [],
				topContet: {},
				hejiObject: {
					roomFlagNum: 0,
					buildingArea: 0,
					gyRentArea: 0,
					gyOldRentPrice: 0,
					gyElevatorNum: 0,
					fieldName6: 0,
					fieldName6: 0,
					fieldName6: 0,
					xzRentArea: 0,
					xzOldRentPrice: 0,
					xzElevatorNum: 0,
					jrRentArea: 0,
					jrOldRentPrice: 0,
					jrElevatorNum: 0,
					allRentArea: 0,
					allOldRentPrice: 0,
					allElevatorNum: 0
				},
				objList: []
			}
		},
		computed: {},
		mounted() {
			console.log(this.blockobj)
			this.objList = this.blockobj
			// this.topContet = this.blockobj.exportTou
			if (this.list) {
				this.list.forEach((item, index) => {
					this.hejiObject.roomFlagNum = Number(this.hejiObject.roomFlagNum) + Number(item.roomFlagNum)
					this.hejiObject.buildingArea = Number(this.hejiObject.buildingArea) + Number(item.buildingArea)
					this.hejiObject.gyRentArea = Number(this.hejiObject.gyRentArea) + Number(item.gyRentArea)
					this.hejiObject.gyOldRentPrice = Number(this.hejiObject.gyOldRentPrice) + Number(item.gyOldRentPrice)
					// this.hejiObject.fieldName6 = Number(this.hejiObject.fieldName6) + Number(item.fieldName6)
					// this.hejiObject.fieldName6 = Number(this.hejiObject.fieldName6) + Number(item.fieldName6)
					// this.hejiObject.fieldName6 = Number(this.hejiObject.fieldName6) + Number(item.fieldName6)
					this.hejiObject.xzRentArea = Number(this.hejiObject.xzRentArea) + Number(item.xzRentArea)
					this.hejiObject.xzOldRentPrice = Number(this.hejiObject.xzOldRentPrice) + Number(item.xzOldRentPrice)
					this.hejiObject.xzElevatorNum = Number(this.hejiObject.xzElevatorNum) + Number(item.xzElevatorNum)
					this.hejiObject.jrRentArea = Number(this.hejiObject.jrRentArea) + Number(item.jrRentArea)
					this.hejiObject.jrOldRentPrice = Number(this.hejiObject.jrOldRentPrice) + Number(item.jrOldRentPrice)
					this.hejiObject.jrElevatorNum = Number(this.hejiObject.jrElevatorNum) + Number(item.jrElevatorNum)
					this.hejiObject.allRentArea = Number(this.hejiObject.allRentArea) + Number(item.allRentArea)
					this.hejiObject.allOldRentPrice = Number(this.hejiObject.allOldRentPrice) + Number(item.allOldRentPrice)
					this.hejiObject.allElevatorNum = Number(this.hejiObject.allElevatorNum) + Number(item.allElevatorNum)
				})
			}
		},

		methods: {
			fanhui() {
				this.$emit('fanhui')
			},
			handleout() {
				this.$confirm('此操作将导出该条内容，请确认是否继续操作？', '导出提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						let list = this.list
						let outList = []
						this.list.forEach((item, index) => {
							outList.push({
								所号: item.blockNo,
								自然间数: item.roomFlagNum,
								建筑面积: item.buildingArea,
								工业计租面积: item.gyRentArea,
								工业调租前租金定额: item.gyOldRentPrice,
								工业调租后租金定额: item.gyElevatorNum,
								// 商业计租面积: item.fieldName6,
								// 商业调租前租金定额: item.fieldName6,
								// 商业调租后租金定额: item.fieldName6,
								行政事业计租面积: item.xzRentArea,
								行政事业调租前租金定额: item.xzOldRentPrice,
								行政事业调租后租金定额: item.xzElevatorNum,
								金融业计租面积: item.jrRentArea,
								金融业调租前租金定额: item.jrOldRentPrice,
								金融业调租后租金定额: item.jrElevatorNum,
								合计计租面积: item.allRentArea,
								合计调租前租金定额: item.allOldRentPrice,
								合计调租后租金定额: item.allElevatorNum,
							})
						})
						outList.push({
							所号: '合计',
							自然间数: this.hejiObject.roomFlagNum,
							建筑面积: this.hejiObject.buildingArea,
							工业计租面积: this.hejiObject.gyRentArea,
							工业调租前租金定额: this.hejiObject.gyOldRentPrice,
							工业调租后租金定额: this.hejiObject.gyElevatorNum,
							// 商业计租面积: this.hejiObject.fieldName6,
							// 商业调租前租金定额: this.hejiObject.fieldName6,
							// 商业调租后租金定额: this.hejiObject.fieldName6,
							行政事业计租面积: this.hejiObject.xzRentArea,
							行政事业调租前租金定额: this.hejiObject.xzOldRentPrice,
							行政事业调租后租金定额: this.hejiObject.xzElevatorNum,
							金融业计租面积: this.hejiObject.jrRentArea,
							金融业调租前租金定额: this.hejiObject.jrOldRentPrice,
							金融业调租后租金定额: this.hejiObject.jrElevatorNum,
							合计计租面积: this.hejiObject.allRentArea,
							合计调租前租金定额: this.hejiObject.allOldRentPrice,
							合计调租后租金定额: this.hejiObject.allElevatorNum,
						})
						// 获取表格数据
						const data = outList
						// 转换数据为工作表
						const worksheet = XLSX.utils.json_to_sheet(data)
						// 创建新的工作簿
						const workbook = XLSX.utils.book_new()
						// 将工作表添加到工作簿
						XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
						// 导出Excel文件
						XLSX.writeFile(workbook, '非住宅房屋情况调查表(一).xlsx')
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消导出'
						})
					})
			}
		},
	}
</script>

<style scoped>
	.publicpageview {
		width: 1260px;
		height: auto;
		background-color: #fff;
		margin: 20px auto 0;
		overflow: hidden;
		box-sizing: border-box;
		padding: 20px;
		outline: 1px solid black;
	}

	.list1 {
		width: 100px;
		box-sizing: border-box;
		height: 30px;
		line-height: 30px;
		text-align: center;
		outline: 1px solid black;
	}

	.list2 {
		width: 500px;
		height: 60px;
		line-height: 30px;
		outline: 1px solid black;
		text-align: center;
		font-size: 12px;
	}

	.list20 {
		width: 1100px;
		height: 60px;
		line-height: 30px;
		outline: 1px solid black;
		text-align: center;
		font-size: 12px;
	}

	.list21 {
		width: 1100px;
		height: 30px;
		line-height: 30px;
		outline: 1px solid black;
		text-align: center;
		font-size: 12px;
	}

	.list10 {
		width: 80px;
		height: 60px;
		line-height: 60px;
		outline: 1px solid black;
		text-align: center;
		font-size: 12px;
	}

	.list12 {
		width: 100px;
		height: 60px;
		line-height: 30px;
		outline: 1px solid black;
		text-align: center;
		font-size: 12px;
	}

	.left {
		width: 25px;
		height: 360px;
		outline: 1px solid black;
		line-height: 180px;
		text-align: center;
		box-sizing: border-box;
	}

	.list4 {
		font-size: 12px;
		width: 160px;
		height: 60px;
		line-height: 60px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}

	.list11 {
		width: 80px;
		height: 30px;
		line-height: 30px;
		outline: 1px solid black;
		text-align: center;
		font-size: 12px;
	}

	.list111 {

		width: 100px;
		height: 60px;
		line-height: 60px;
		outline: 1px solid black;
		text-align: center;
		font-size: 12px;
	}

	.list15 {
		font-size: 12px;
		width: 1120px;
		height: 40px;
		line-height: 40px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}

	.list13 {
		font-size: 12px;
		width: 80px;
		height: 40px;
		line-height: 40px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}

	.list14 {
		font-size: 12px;
		width: 160px;
		height: 80px;
		line-height: 80px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}

	.list16 {
		font-size: 12px;
		width: 160px;
		height: 120px;
		line-height: 120px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}

	.list8 {
		font-size: 12px;
		width: 80px;
		height: 20px;
		line-height: 20px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}

	.list7 {
		font-size: 12px;
		width: 160px;
		height: 20px;
		line-height: 20px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}

	.list9 {
		font-size: 12px;
		width: 100px;
		height: 20px;
		line-height: 20px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}


	.list6 {
		width: 500px;
		height: 30px;
		line-height: 30px;
		outline: 1px solid black;
		text-align: center;
		font-size: 12px;
	}

	.list5 {
		font-size: 12px;
		width: 100px;
		height: 30px;
		line-height: 30px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}

	.list99 {
		font-size: 12px;
		width: 600px;
		height: 180px;
		line-height: 180px;
		outline: 1px solid black;
		/* text-align: center; */
		box-sizing: border-box;
		padding-left: 30px;
	}
</style>